<template>
<div :class="$style.container" class="shop">
  <group :gutter="0" title="商品信息">
    <cell v-for="(item, idx) in lists" :key="item.doubanId + idx">
      <div slot="title" :class="$style.left">
        <img v-lazy="item.poster">
        <div :class="$style.content">
          <h4>{{item.original_title}}</h4>
          <p>￥ {{item.price.toFixed(2)}}</p>
        </div>
      </div>
    </cell>
  </group>
</div>
</template>

<script>
import { Group, Cell } from 'vux'
export default {
  props: {
    lists: {
      type: Array,
      default: () => []
    }
  },
  components: {
    Group,
    Cell
  }
}
</script>

<style lang='less' module>
.container {
  .left {
    img {
      margin-right:12px;
      width: 105px;
      height:59px;
      object-fit: cover;
      vertical-align: top;
    }
    .content {
      display: inline-block;
      width: 218px;
      h4 { 
        margin-top: 4px;
        color: #2B333B;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height:16px;
      }
      p {
        margin-top: 16px;
        color: #F01414;
        font-size:14px;
      }
    }
  }
}
</style>
<style scoped>
  .shop >>> .weui-cells:after {
    height:0px;
    border-bottom:none;
  }
</style>